<!-- Horizontal Form -->
<div class="box box-info" id="keyServices-insert-app">
    <div class="box-header with-border">
        <h3 class="box-title">添加服务</h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form class="form-horizontal">
        <div class="box-body">
            <div class="form-group">
                <label for="typeId" class="col-sm-2 control-label">服务类型</label>
                <div class="col-sm-10">
                    <select name="type" id="typeId" class="=form-control">
                        <option value="0">专项服务</option>
                        <option value="1">特约服务</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="nameId" class="col-sm-2 control-label">服务名称</label>
                <div class="col-sm-10">
                    <input type="text" name="name" class="form-control" id="nameId">
                </div>
            </div>
            <div class="form-group">
                <label for="imgId" class="col-sm-2 control-label">图片路径</label>
                <div class="col-sm-10">
                    <input type="text" name="img" class="form-control" id="imgId" :value="img" readonly>
                    <input id="imageFile" type="file" name="imgFile" value="选择图片" @change="uploadImg()">
                </div>
            </div>
            <div class="form-group">
                <label for="summaryId" class="col-sm-2 control-label">简介</label>
                <div class="col-sm-10">
                    <textarea id="summaryId" name="summary" cols="40" rows="4" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label for="contentId" class="col-sm-2 control-label">服务内容</label>
                <div class="col-sm-10">
                    <textarea id="contentId" name="content" cols="40" rows="6" class="form-control"></textarea>
                </div>
            </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
            <button type="button" class="btn btn-default btn-cancel" @click="docancel">取消</button>
            <button type="button" class="btn btn-info pull-right btn-save" @click="insertKeyService()">
                保存
            </button>
        </div>
        <!-- /.box-footer -->
    </form>
</div>
<script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="bower_components/layer/layer.js"></script>
<script type="text/javascript">
    var keyServicesInsertApp = new Vue({
        el: "#keyServices-insert-app",
        data: {
            img:""
        },
        methods: {
            insertKeyService: function () {
                //添加数据
                let formData = new FormData(document.querySelector("form"));
                if (!formData) {
                    alert('获取表单数据异常!');
                    return;
                }
                //发起axios post 请求 ,向后端提交数据
                axios({
                    method: 'post',
                    url: "/f-keyservices/insert",
                    data: formData
                }).then(res => {
                    let result = res.data;
                    if (result.state == 2000) {
                        alert('操作成功!');
                        this.docancel();
                    } else {
                        alert(result.message);
                    }
                })
            },
            docancel: function () {
                //跳转到角色列表视图
                $('#mainContentId').load('/sys/keyServicesListPage');
            },
            uploadImg: function () {
                let imageFile = document.getElementById("imageFile").files;
                if(imageFile.length<1){
                    alert("请选择文件")
                    return;
                }
                let file = imageFile[0];
                let form = new FormData();
                form.append("imageFile", file);

                axios({
                    url: "/f-keyservices/uploadImg",
                    method: "post",
                    data: form
                }).then(function (response) {
                    let result=response.data;
                    console.log(result);
                    if(result.state==2000){
                        keyServicesInsertApp.img = result.data;
                    }else{
                        alert(result.message);
                    }
                }).catch(e=>console.error(e.message))
            }
        }
    })
</script>
    
    
    
    
    
    
    